<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function f1(){
            console.log(111)
        }

        // 当页面加载完成后才执行
        window.onload=function(){
            var btn2 = document.getElementById('btn2')
            btn2.onclick=function(event){
                // console.log(event)
                // console.log(event.target)
                console.log(this) // this指向当前事件源对象

                /**
                 * 箭头函数可以让this指向固定化，不会产生新的this对象
                 */ 
                var names = ['tom', 'jack', 'lucy']

                var _this = this
                
                names.forEach(function (item,index) {
                    console.log(item,index)
                    console.log(_this)
                    // console.log(this) // 此处的this指向window，this产生了新的含义
                    console.log('------------------------------------------')
                })

                // names.forEach((item,index) => {
                //     console.log(item,index)
                //     console.log(this) // 此处的this指向外层的this，不产生新的含义
                //     console.log('------------------------------------------')
                // })

            }
        } 


        
    </script>
</head>
<body>
    <!-- 方式1：静态绑定 -->
    <input type="button" value="按钮1" onclick="f1()">

    <!-- 方式2：动态绑定 -->
    <input type="button" value="按钮2" id="btn2">
    
</body>
</html>